
<script setup lang="ts">
import type { iState ,iKindPro} from '@/type/homeType';
import type{ iNpro, iStatesa } from '@/type/detail';
import { twonameListFn } from '@/api/detail';
import { getSwipeFn } from '@/api/home';
import { onMounted } from 'vue';
import { reactive } from 'vue';
import type{ iName } from '@/type/homeType';
import { ref } from 'vue';
import type{ Ref } from 'vue';
import { useRoute,useRouter} from 'vue-router';
import { nproDataFn } from '@/api/detail';
const heart =ref(false)
const heart1 =ref(false)
const star=ref(false)
const  route =useRoute()
const  router =useRouter()
const hnum:Ref<number>=ref(Number(route.query.like))
const snum:Ref<number>=ref(Number(route.query.like))
const chat =ref(0)
const statesa: iStatesa = reactive({
    nproData:[]
    
})
function detailClick(item:iNpro){

 router.push(   {
     name: 'detail',
        query: {

            bed:item.bed,
          kind:item.kind,
          price:item.price,
          start:item.start,
          img: route.query.img
      
        }
       
})
}
function hosterClick(item:iName){
    heart.value=false
    heart1.value=false
    star.value=false
  router.push(   {
     name: 'homedetail',
        query: {
          img: item.img,
          like: item.like,
          location: item.location,
          name: item.name,
          text: item.text,
        }
      })
}
twonameListFn().then(res=>{
    console.log(res.data);
    state.nameListData =res.data
    console.log(state.nameListData);
    
  })
let careful:Ref<boolean> =ref(false)
const state: iState = reactive({
  swipeData: [],
  kindData:[],
  kindProData:[],
  nameListData:[]
});
onMounted(() => {
    state.swipeData=getSwipeFn()
    nproDataFn().then(res=>{
        console.log(res.data);
       
        statesa.nproData =res.data
        console.log(statesa.nproData);
        
    })

})
function addClick(){
    careful.value =!careful.value
  
}
function heartClick1(){
    heart1.value =!heart1.value
    if(heart1.value==true){
        hnum.value++
    }else{
        hnum.value--
    }
}
function heartClick(){
    heart.value =!heart.value
}
function starClick(){
    star.value =!star.value
    if(star.value==true){
        snum.value++
    }else{
        snum.value--
    }
}
function backClick(){
  router.go(-1);
}
</script>
<template>
<main class="box">
  <div class="content">
    <van-icon @click="backClick" color="white" class="back" size="40" name="arrow-left" />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" >
  <van-swipe-item v-for="item in state.swipeData":key=item.Swipid><img :src="item.imgurl" alt=""></van-swipe-item>
</van-swipe>
<div class="message"><img class="messageimg" src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E8%81%8A%E5%A4%A9/u761.svg" alt=""><div class="name">名宿{{ route.query.name }}</div> <van-button v-if="careful==false"  class="messagebutton"  color="#ff9933" plain icon="plus" type="primary" @click="addClick">关注</van-button>
<van-button v-else  class="messagebutton"  color="#ff9933"  @click="addClick"   type="primary">已关注</van-button></div>
<div class="location"><van-icon class="loationimg" size="20" name="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u282.svg" /><div class="loationtext">{{ route.query.location }}</div></div>

<div class="messagetext">{{ route.query.text }}...</div>
<h2 class="hometitle">提到的名宿</h2>
<div @click="detailClick(statesa.nproData)" class="homecard">
<img class="cardimg" :src="route.query.img" alt="">
<div class="cardtitle">拱北华山别墅</div>
<div class="cardcontet">{{ statesa.nproData.kind }}· {{ statesa.nproData.bed }}居{{ statesa.nproData.bed }}床{{ statesa.nproData.bed }}人·123平米</div>
<div class="Price">￥{{ statesa.nproData.price }}</div>

<van-icon @click="heartClick" v-if="heart" color="red" class="loationimg" size="20" name="like" />
<van-icon @click="heartClick" v-else class="loationimg" size="20" name="like-o" />
<van-icon class="locationchat" size="20" name="chat-o" />
</div>
<div class="hscbox">
<div class="heart">
    <van-icon @click=" heartClick1" v-if="heart1" color="red" class="loationimg" size="20" name="like" />
    <van-icon @click=" heartClick1" v-else class="loationimg" size="20" name="like-o" />
    <span>{{ hnum}}</span>
</div>
<div class="star">
    <van-icon @click=" starClick" v-if="star" color="#ff9900" class="loationimg" size="20" name="star" />
    <van-icon @click=" starClick" v-else class="loationimg" size="20" name="star-o" />
    <span>{{ snum}}</span>
</div>
<div class="chat">
    <van-icon class="locationchat" size="20" name="chat-o" />
    <span>{{ chat}}</span>
</div>
</div>
<div class="chatcard">
    万一火了呢，赶快去评论~
</div>

<div class="push">
<div class="pushtitle">为你推荐</div>
</div>
<div class="hosterAll">
  <div class="hosterbox" @click="hosterClick(item)"  v-for="item in state.nameListData" :key=item.name  >
  <img class="hosterimg" :src="item.img" alt="">
  <div><van-icon size="24px" name="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u282.svg" /><span class="hosterlocation">{{ item.location }}</span></div>
  <div class="hostertext">{{ item.text }}</div>
  <div class="hosterboxb"><div class="left"><van-icon size="24px" name="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E8%81%8A%E5%A4%A9/u761.svg" /><span>{{ item.name }}</span></div><div class="right"><van-icon size="24px" name="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u287.png" /><span> {{ item.like }}</span></div></div>
 
</div>
</div>
  </div>
</main>
</template>

<style lang="scss" scoped>
.back{
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 22;
}
.content{
    background-color: #f9f9f9;
}
.my-swipe {
  height: 2.2rem;
  line-height: 2.2rem;
  width: 100%;

  img {
    width: 100%;
    height: 100%;
  }
}
.message{
    width: 90%;
    height: 60px;
    position: relative;
    margin: 20px auto;
    .messageimg{
    width: 50px;
    height: 50px;
    position: absolute;
    left: 0;
    bottom: 0;
}
.name{
    font-size: 16px;
    font-weight: 800;
    position: absolute;
    left: 60px;
    bottom: 15px;
}
.messagebutton{
    height: 0.3rem;
    border-radius: 10px;
    position: absolute;
    right: 0;
    bottom: 0;
}
}
.location{
    width: 90%;
    height: 20px;
    margin: 20px auto;
    position: relative;
    .loationimg{
        position: absolute;
        top: 0;
        left: 0;
    }
    .loationtext{
        position: absolute;
        font-size: 14px;
        top: 0;
        left: 40px;
      
    }
}
.messagetext{
    width: 90%;
    margin:  10px auto;
    font-size: 14px;

}
.hometitle{
    font-size: 22px;
    font-weight: 800;
    margin :10px 5%;
}
.homecard{
    width: 90%;
    height: 85px;
    margin: 10px auto;
    border-radius: 5px;
    box-shadow: 2px 4px  #eaeaea;
    position: relative;
    overflow: hidden;
    .cardimg{
        width: 130px;
        position: absolute;
        left: -10px;
        top: 0;
    }
    .cardtitle{
        font-size: 15px;
        position: absolute;
        left: 130px;
        top: 0;
    }
    .cardcontet{
        font-size: 13px;
        position: absolute;
        left: 130px;
        top: 30px;
    }
    .Price{
        font-size: 20px;
        position: absolute;
        left: 128px;
        bottom: 5px;
        color: #ff9b54;
        font-weight: 500;
    }
    .loationimg{
        position: absolute;
        right: 10px;
        top: 5px;
    }
    .locationchat{
        position: absolute;
        right: 10px;
        bottom: 5px;
    }
}
.hscbox{
    width: 90%;
    height: 85px;
    margin: 10px auto;
    position: relative;
    .heart{
        position: absolute;
        top: 5px;
        right: 115px;
    }
    .star{
        position: absolute;
        top: 5px;
        right: 64px;
    }
    .chat{
        position: absolute;
        top: 5px;
        right: 20px;
    }
}
.chatcard{
    width: 90%;
    height: 55px;
    margin: 10px auto;
    border-radius: 5px;
    box-shadow: 2px 4px  #eaeaea;
    font-size: 15px;
    padding: 20px;
    box-sizing: border-box;
}
.push{
    width: 90%;
    height: 55px;
    margin: 10px auto;
    .pushtitle{
        font-size: 22px;
        font-weight: 800;
    }
}
.hosterAll{
    width: 90%;
    height: 55px;
    margin: 10px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .hosterbox{
    border: 1px solid #cccccc;
background-color: white;

width: 46%;
    .hosterimg{
  width: 100%;
  height: 2rem;
  margin-bottom: 10px;
}
.hosterlocation{
 position: relative;
  font-size: 16px;
  bottom: 3px;
  left: 15px;
  box-sizing: border-box;
  
}

.hostertext{
    margin:10px 0;
    height: 32px;
font-size: 14px;
overflow:hidden
}
.hosterboxb{
    margin-top: 10px;
.left{
float: left;
}
.right{
float: right;
}
}
  }
 
}
</style>
